<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>车辆详情页</title>
		<script type="text/javascript" src="../js/xadmin.js"></script>
		<script type="text/javascript" src="../js/jquery-2.2.4.min.js"></script>
		<link rel="stylesheet" href="../lib/layui/css/layui.css">
		<link rel="stylesheet" href="../css/font.css">

		<!-- favicon
		============================================ -->
		<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">

		<!-- Google Fonts
		============================================ -->
		<link href='https://fonts.googleapis.com/css?family=Lato:400,400italic,900,700,700italic,300' rel='stylesheet' type='text/css'>

		<!-- Bootstrap CSS
		============================================ -->
		<link rel="stylesheet" href="./css/bootstrap.min.css">

		<!-- nivo slider CSS
		============================================ -->
		<link rel="stylesheet" href="lib/nivo-slider/css/nivo-slider.css" type="text/css" />
		<link rel="stylesheet" href="lib/nivo-slider/css/preview.css" type="text/css" media="screen" />

		<!-- Fontawsome CSS
		============================================ -->
		<link rel="stylesheet" href="css/font-awesome.min.css">

		<!-- owl.carousel CSS
		============================================ -->
		<link rel="stylesheet" href="css/owl.carousel.css">

		<!-- jquery-ui CSS
		============================================ -->
		<link rel="stylesheet" href="css/jquery-ui.css">

		<!-- meanmenu CSS
		============================================ -->
		<link rel="stylesheet" href="css/meanmenu.min.css">

		<!-- animate CSS
		============================================ -->
		<link rel="stylesheet" href="css/animate.css">

		<!-- style CSS
		============================================ -->
		<link rel="stylesheet" href="style.css">

		<!-- responsive CSS
		============================================ -->
		<link rel="stylesheet" href="css/responsive.css">

		<!-- modernizr JS
		============================================ -->
		<script src="js/vendor/modernizr-2.8.3.min.js"></script>
	</head>
	<body style="background-color: #F2F2F2;">
		<!--Mainmenu Start-->
		<div class="mainmenu-area hidden-sm hidden-xs">
			<div id="sticker">
				<div class="container">
					<div class="row">
						<div class="col-lg-12 col-md-12 hidden-sm">
							<div class="mainmenu" style="color: #007DDB;">
								<nav>
									<ul id="nav">
										<li><a style="font-size: 20px;color: #009688;" href="home.html">二手车交易平台</a></li>
										<li style="margin-left: 120px;"></li>
										<li class="current"><a class="lfont" href="home.html">买车</a></li>
										<li><a href="sell.html">卖车</a></li>
										<li><a href="buy.html" style="color: red;">求购</a></li>
										<li><a href="user.html">个人中心</a></li>
										<li><a id="logOut">安全退出</a></li>
									</ul>
								</nav>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--End of Mainmenu-->
		<!--Breadcrumb Start-->
		<div class="breadcrumb-container" >
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<div class="breadcrumbs">
							<ul>
								<li class="home"><a href="buy.html">求购</a><span>/ </span></li>
								<li><a>求购信息</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--End of Breadcrumb-->
		<div id="view" style="background-color: #F2F2F2;"></div>




		<!-- 渲染页面代码 -->
		<script id="demo" type="test/html">
			<div class="product-deails-area">
				<div class="container">
					<div >
						<div>
							<div class="product-details-content row">
								<div class="layui-carousel" id="test3" lay-filter="test4" style="margin-left: 300px;">
									<div carousel-item="">
										<div><img src="../images/{{d.data.picture}}"></div>
									</div>
								</div>
								<hr />
								<div style="margin-top: 20px;">
											<p>
												<!-- 中间线570px -->
												<div class="layui-form-item" style="margin-left: 400px;">
													<div class=" inline">{{d.data.brand}} {{d.data.model || ''}} {{d.data.color}} {{d.data.type}}</div>
												</div>
												<div class="layui-form-item" style="margin-left: 400px;">
													<div class=" inline">车龄：{{d.data.usedTime}} 年以内</div>
													<div class=" inline" style="margin-left: 30px;"></div>
													<div class=" inline">行驶里程：{{d.data.mileage}} 万公里以内</div>
												</div>
												<hr />
												<div class="layui-form-item" style="margin-left: 400px;">
													<div class=" inline" style="width: 180px;">求购时间：</div>
													<div class=" inline" style="width: 400px;">{{d.data.saleTime}}</div>
												</div>
												<hr />
												<div class="layui-form-item" style="margin-left: 400px;">
													
													<div class=" inline" style="color: #ff0000;">出价：{{d.data.price}}万</div>
												</div>
												<div class="layui-form-item" style="margin-left: 400px;">
													<div class=" inline" style="width: 400px;">咨询电话：{{d.data.note}}</div>
												</div>
											</p>
								</div>
							</div>
			
			
						</div>
			
					</div>
				</div>
			</div>
		  
		 <hr />
		  
		</script>
		<!-- 渲染页面代码结束 -->

		<script src="../lib/layui/layui.js" charset="utf-8"></script>
		<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->


		<script>
			var car;
			var token = document.cookie.split(";")[0];
			var id = getURLParameter('carId');
			console.log(id);
			//获取url后面的参数
			function getURLParameter(name) {
				return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [, ""])[
					1].replace(/\+/g, '%20')) || null;
			}

			layui.use(['laytpl', 'carousel'], function() {
				laytpl = layui.laytpl;
				var carousel = layui.carousel;
				$.get("http://localhost:8888/usedcar/car/getCarById?token=" + document.cookie.split(";")[0], {
						carId: id
					},
					function(response) {
						console.log(response.data);

						var getTpl = document.getElementById('demo').innerHTML,
							view = document.getElementById('view');
						laytpl(getTpl).render(response, function(html) {
							view.innerHTML = html;
							//改变下时间间隔、动画类型、高度
							carousel.render({
								elem: '#test3',
								interval: 3000,
								height: '410px',
								wdith: '900px',
								arrow: 'always',
								indicator: 'outside'
							});
						});
					});
			});
		</script>


		<script type="text/javascript" src="../js/script.js"></script>
		<script type="text/javascript" src="../js/bootstrap.min.js"></script>
		<!-- jquery
		============================================ -->
		<script src="js/vendor/jquery-1.11.3.min.js"></script>

		<!-- bootstrap JS
		============================================ -->
		<script src="js/bootstrap.min.js"></script>

		<!-- nivo slider js
		============================================ -->
		<script src="lib/nivo-slider/js/jquery.nivo.slider.js" type="text/javascript"></script>
		<script src="lib/nivo-slider/home.js" type="text/javascript"></script>

		<!-- wow JS
		============================================ -->
		<script src="js/wow.min.js"></script>

		<!-- meanmenu JS
		============================================ -->
		<script src="js/jquery.meanmenu.js"></script>

		<!-- owl.carousel JS
		============================================ -->
		<script src="js/owl.carousel.min.js"></script>

		<!-- price-slider JS
		============================================ -->
		<script src="js/jquery-price-slider.js"></script>

		<!-- scrollUp JS
		============================================ -->
		<script src="js/jquery.scrollUp.min.js"></script>

		<!--Countdown js-->
		<script src="js/jquery.countdown.min.js"></script>

		<!-- Sticky Menu JS
		============================================ -->
		<script src="js/jquery.sticky.js"></script>

		<!-- Elevatezoom JS
		============================================ -->
		<script src="js/jquery.elevateZoom-3.0.8.min.js"></script>

		<!-- plugins JS
		============================================ -->
		<script src="js/plugins.js"></script>

		<!-- main JS
		============================================ -->
		<script src="js/main.js"></script>
	</body>
</html>
